<template>
	<view class="shop-index">
		<u-search placeholder="品种、规格、工艺等"></u-search>
		<view class="content display-flex">
			<view class="left">
				<view class="item" :class="{active:menuActive == index}" v-for="(item, index) in menuData.list" :key="item.name" @click="handleMenuClick(index)">
					<text class="font-8F8F8F">{{item.name }}</text>
				</view>
			</view>
			<view class="right">
				<image :src="IMG_URL + '/shop/banner1.jpg'" class="banner"/>
				<view class="section">
					<view class="title font-bold font-28 text-center">棉混纺纱</view>
					<view class="list display-flex justify-between">
						<view class="item">
							<image :src="IMG_URL + '/shop/cover_img.png'" class="cover-img"/>
							<text class="font-24 display-block">棉/竹</text>
						</view>
						<view class="item">
							<image :src="IMG_URL + '/shop/cover_img.png'" class="cover-img"/>
							<text class="font-24 display-block">棉/粘</text>
						</view>
						<view class="item">
							<image :src="IMG_URL + '/shop/cover_img.png'" class="cover-img"/>
							<text class="font-24 display-block">棉/涤(CVC)</text>
						</view>
					</view>
				</view>
				<view class="section">
					<view class="title font-bold font-28 text-center">棉混纺纱</view>
					<view class="list display-flex justify-between">
						<view class="item">
							<image :src="IMG_URL + '/shop/cover_img.png'" class="cover-img"/>
							<text class="font-24 display-block">棉/竹</text>
						</view>
						<view class="item">
							<image :src="IMG_URL + '/shop/cover_img.png'" class="cover-img"/>
							<text class="font-24 display-block">棉/粘</text>
						</view>
						<view class="item">
							<image :src="IMG_URL + '/shop/cover_img.png'" class="cover-img"/>
							<text class="font-24 display-block">棉/涤(CVC)</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue'
	import { IMG_URL } from '@/utils/constant'
	
	const menuActive = ref(0)
	
	const menuData = reactive({
		list:[{
			name:'纯棉纱',
		},{
			name:'化纤纱',
		},{
			name:'混纺纱',
		},{
			name:'功能性纤纱',
		}]
	})
	
	const handleMenuClick = (index:number) => {
		menuActive.value = index
	}
</script>

<style lang="scss" scoped>
	.shop-index {
		background-color: #fff;
		.content {
			.left {
				width:168rpx;
				background-color: #F2F3F7;
				.item {
					padding:40rpx 0 38rpx;
					text-align:center;
					box-sizing: border-box;
					text {
						text-align:left;
						width:100rpx;
						display:inline-block;
					}
					&.active {
						background-color:#fff;
						text {
							position: relative;
							&::before {
								position: absolute;
								content:'';
								width: 8rpx;
								height: 100%;
								background-color: $uni-color-primary;
								left:-35rpx;
							}
							//border-left:8rpx solid $uni-color-primary;
						}
					}
				}
			}
			.right{
				margin-left: 30rpx;
				.banner {
					width: 522rpx;
					height: 188rpx;
				}
				.section {
					margin-top:60rpx;
					text-align: center;
					.title {
						position: relative;
						display:inline-block;
						
						&::before {
							content:'';
							position:absolute;
							top:20rpx;
							left:-62rpx;
							border-top:1rpx solid $uni-border-color;
							width: 52rpx;
							
						}
						&::after {
							content:'';
							position:absolute;
							top:20rpx;
							right:-62rpx;
							border-top:1rpx solid $uni-border-color;
							width: 52rpx;
							
						}
					}
					.list {
						margin-top:40rpx;
						.item {
							.cover-img {
								width: 100rpx;
								height: 100rpx;
							}
						}
					}
					
				}
			}
		}
	}
</style>
